<%@ page import="com.lagou.entity.ClassGrade" %>
<%@ page import="java.util.List" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>班级信息管理系统</title>
    <link href="./css/bootstrap.min.css" rel="stylesheet"/>
    <script src="./js/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="./js/bootstrap.min.js" type="text/javascript"></script>
</head>
<style type="text/css">
    .pagination_div {
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
<body>
<div>
    <div class="table-responsive">
        <%-- 绘制一个10行7列的表格用于展示所有班级信息，最开始没有学生信息的时候表格数据全部为空即可，让表格填充整个页面--%>
        <table class="table">
            <%-- 提供相应功能的按钮， 其中增加和修改操作共用一个模态框，其他操作通过JS来处理  --%>
            <caption>
                <button class="btn btn-info" id="classGrade_back">返回主页面</button>
                <button class="btn btn-info" id="classGrade_page">显示班级信息</button>
                <button class="btn btn-info" id="classGrade_add" data-toggle="modal" data-target="#myModal">增加班级信息</button>
                <button class="btn btn-info" id="classGrade_delete">删除班级信息</button>
                <button class="btn btn-info" id="classGrade_modify" data-toggle="modal" data-target="#myModal">修改班级信息</button>
                <button class="btn btn-info" id="classGrade_find">查询班级信息</button>
                <label for="s_code"></label><input type="text" id="s_code" placeholder="按班级编号查询" style="...">
            </caption>


            <%-- 绘制1行7列的表头信息           --%>
            <thead>
            <tr>
                <th>选择</th>
                <th>班级编号</th>
                <th>班级名称</th>
                <th>年级名称</th>
                <th>班主任名称</th>
                <th>班级口号</th>
                <th>班级人数</th>
            </tr>
            </thead>

            <tbody id="tbody"></tbody>
            <%--    绘制10行 7列的假数据内容添加到表格中占位置      --%>
            <%--   获取内置对象中放入的所有班级信息，在这里进行显示     --%>

            <c:if test="${ null != sessionScope.classGradeList && sessionScope.classGradeList.size() > 0}">
                <c:forEach var="classGrade" items="${sessionScope.classGradeList}">
                    <tr>
                        <td><label>
                            <input type="checkbox" value="${classGrade.id}"/>
                        </label></td>
                        <td>${ classGrade.id }</td>
                        <td>${ classGrade.name }</td>
                        <td>${ classGrade.grade }</td>
                        <td>${ classGrade.teacher }</td>
                        <td>${ classGrade.slogan }</td>
                        <td>${ classGrade.number }</td>
                    </tr>
                </c:forEach>
            </c:if>
        </table>

        <%-- 管理班级信息的模态框（Modal）  --%>
        <div class="modal" id="myModal" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal" aria-hidden="true">
                            <span>X</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabelAdd">
                            班级信息
                        </h4>
                    </div>
                    <form action="classGradeAddServlet" method="post">
                        <input type="hidden" name="flag" id="flag"/>
                        <div class="modal-body" id="modal-body">
                            <label for="name">班级名称:</label>
                            <input type="text" class="form-control" id="m_name" name="name" placeholder="请输入班级名称">
                            <label for="name">年级名称：</label>
                            <input type="text" class="form-control" id="m_grade" name="grade" placeholder="请输入年级名称">
                            <label for="name">班主任名称：</label>
                            <input type="text" class="form-control" id="m_teacher" name="teacher" placeholder="请输入班主任名称">
                            <label for="name">班级口号:</label>
                            <input type="text" class="form-control" id="m_slogan" name="slogan" placeholder="请输入班级口号">
                            <label for="name">班级人数:</label>
                            <input type="text" class="form-control" id="m_number" name="number" placeholder="请输入班级人数">
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">保存</button>
                            <button type="reset" class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="pagination_div">
        <ul class="pagination">

            <%--  定义变量i初始值为1    --%>
            <c:set var="i" value="1"></c:set>
            <%--  定义变量len 初始化为集合的大小   --%>
            <c:set var="len" value="${sessionScope.size()/10+1}"></c:set>

            <li><a href="classGradePageQueryServlet?page="+${i>1?i-1:i}>上一页</a></li>
            <%--  循环遍历所有页码，针对页数过多时，需要特殊处理    --%>
            <c:if test="${null != sessionScope.classGradeList && sessionScope.classGradeList.size()>0}">
                <c:forEach var="j" begin="1" end="${len}" step="1">
                    <li><a href="classGradePageQueryServlet?page="+${j}> ${j} </a></li>
                </c:forEach>
            </c:if>

            <li><a href="classGradePageQueryServlet?page="+${i<len?i+1:i}>下一页</a></li>
        </ul>
    </div>
</div>
</body>
</html>

<script type="text/javascript">

    // 获取模块路径信息

    let moduePathName = window.document.location.pathname;

    // 获取模块名称
    let moduleName = moduePathName.substring(0, moduePathName.substr(1).indexOf('/')+1);

    //返回主页面
    $("#classGrade_back").on("click", function () {
        window.location.href = moduleName + "/mainPage.jsp";
    });


    //显示班级信息
    $("#classGrade_page").on("click", function () {
        window.location.href = moduleName + "/classGradePageQueryServlet";
    });

    //增加班级信息
    $("#classGrade_add").on("click", function () {
        $("#flag").val("add");
    });

    //修改学生信息
    $("#classGrade_modify").on("click", function (flag) {
        let checkboxs = $("input[type='checkbox']:checked");
        //处理未勾选的情况
        if(checkboxs.length == 0){
            alert("请选择一个班级!");
            return false;
        } else if(checkboxs.length>1){
            alert("只能选择一个班级！");
            return false;
        } else {
            $("#flag").val(checkboxs[0].value);
        }
    });

    //删除班级信息
    $("#classGrade_delete").on("click", function () {
        // 获取勾选的复选框
        let checkboxs = $("input[type='checkbox']:checked");
        let idsString = "";
        for(let i=0; i<checkboxs.length; i++){
            idsString += "id="+checkboxs[i].value;
            if(i !== checkboxs.length-1){
                idsString += "&";
            }
        }
        //处理未勾选的情况
        if(checkboxs.length==0){
            alert("请选择一个班级");
        } else {
            window.location.href = moduleName + "/classGradeDeleteServlet?"+ idsString;
        }
    });

    // 查找学生信息
    $("#classGrade_find").on("click", function () {
        let codeLike = $(this).siblings("#s_code").val();
        if(0 == codeLike.length){
            alert("必须输入班级编号!");
            return false;
        } else if(/^\d{0,4}$/g.test(codeLike)) {
            window.location.href = moduleName + "/classGradeQueryServlet?id=" + codeLike;
        } else {
            alert("班级编号必须是数字");
        }

    });


</script>
